/**
 * Copyright (c) 快宝网络 kuaidihelp.com Co., Ltd. All Rights Reserved 禁止外泄以及用于其它的商业用途
 */

import React, { useMemo, useRef, useState } from 'react';
import { Button, FormInstance, ModalProps } from 'antd';
import { PlusOutlined } from '@ant-design/icons';
import ProForm, {
  ModalForm,
  ProFormDatePicker,
  ProFormSelect,
  ProFormText,
  ProFormTextArea,
} from '@ant-design/pro-form';
import { addVipPrinter } from '@/services/4gPrinterVip';
import { freeDurationOptions, rulesMap, styleOptions, typeOptions } from './_utils';
import dayjs from 'dayjs';

interface AddProps {
  onSuccess: () => void;
}

const Add: React.FC<AddProps> = (props) => {
  const { onSuccess } = props;
  const formRef = useRef<FormInstance>();
  const [visible, setVisible] = useState(false);

  const handleClick = () => setVisible(true);
  const handleClose = () => setVisible(false);

  const modalProps = useMemo<ModalProps>(
    () => ({
      centered: true,
      onCancel: () => handleClose(),
    }),
    [],
  );
  const today = useMemo(() => dayjs().format('YYYY-MM-DD'), []);

  const handleFinish = (val: any) => {
    return addVipPrinter(val).then((res) => {
      if (res.code == 0) {
        onSuccess();
        handleClose();
        formRef.current?.resetFields();
      }
    });
  };

  const handleFieldsChange = (changedFields: any) => {
    const [
      {
        name: [fieldName],
        value,
      },
    ] = changedFields;
    if (fieldName === 'print_style') {
      formRef.current?.setFieldsValue({
        send_time: value === '2' ? 3 : 6,
      });
    }
  };

  return (
    <>
      <Button key='button' icon={<PlusOutlined />} onClick={handleClick} type='primary'>
        新建
      </Button>
      <ModalForm
        title='新增'
        visible={visible}
        modalProps={modalProps}
        onFinish={handleFinish}
        formRef={formRef}
        onFieldsChange={handleFieldsChange}
      >
        <ProForm.Group>
          <ProFormSelect
            width='md'
            options={typeOptions}
            name='print_type'
            label='打印机类型'
            rules={rulesMap['print_type']}
          />
          <ProFormSelect
            width='md'
            options={styleOptions}
            name='print_style'
            label='打印机款式'
            rules={rulesMap['print_style']}
          />
        </ProForm.Group>
        <ProFormText
          name='print_code'
          label='打印机编码'
          placeholder='请输入打印机唯一编码，可输入多条，用逗号或空格分隔'
          rules={rulesMap['print_code']}
        />
        <ProForm.Group>
          <ProFormSelect
            width='md'
            options={freeDurationOptions}
            name='send_time'
            label='赠送时长'
            rules={rulesMap['send_time']}
          />
          <ProFormDatePicker
            width='md'
            name='selling_time'
            label='售卖时间'
            rules={rulesMap['selling_time']}
            initialValue={today}
          />
        </ProForm.Group>
        <ProFormTextArea name='desc' label='备注' />
      </ModalForm>
    </>
  );
};

export default Add;
